<template>
	<view class="confirm">
		
		<navigator url="/pages/address/index?type=select" class="address">
			<view class="icon">
				<view class="iconfont icon-dizhi-01"></view>
			</view>
			<view class="info">
				<block v-if="detail.address.id">
					
						

					<view class="top">
						<view>{{detail.address.recipients}}</view>
						<view>{{detail.address.mobile}}</view>
					</view>
					<view class="content">{{detail.address.province}} {{detail.address.city}} {{detail.address.area}} {{detail.address.address}}</view>
	
					
				</block>
				<block v-else>
					<view class="tips">
						您还没有添加收货地址
						
					</view>
				</block>
				
			</view>
			<view class="icon">
				<view class="iconfont icon-you"></view>
			</view>
			
		</navigator>

		<view class="bus-box">
			<view class="bus" v-for="(bus, busIndex) in detail.businessGoods" :key="busIndex">
				<view class="header">
					<view class="iconfont icon-dianpu"></view>
					<view class="bus-name">{{bus.business_name}}</view>
				</view>

				<view class="goods-list">
					<view class="goods" v-for="(goods, goodsIndex) in bus.products" :key="goodsIndex">
						<view class="img">
							<image :src="goods.original_image"></image>
						</view>
						<view class="goods-info">
							<view class="goods-name">{{goods.goods_name}}</view>
							<view class="spec-name">{{goods.spec_name}}</view>
							<view class="price-number">
								<view class="price">￥{{goods.shop_price}} 积分可抵扣{{goods.point}}元</view>
								<view class="number">x {{goods.number}}</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-navigate">
							<view class="left">快递运费</view>
							<view class="right text-gray">￥{{bus.freight}}</view>
						</view>
					</view>
					<view class="uni-list-cell" v-if="bus.coupons.length > 0" @tap="coupons = bus.coupons; business_index=busIndex; showPopup = true">
						<view class="uni-list-cell-navigate uni-navigate-right">
							<view class="left">店铺优惠</view>
							<view class="right text-gray coupon-name">{{bus.coupon_text?bus.coupon_text:'不使用优惠券'}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-navigate">
							<view class="left">小计价格</view>
							<view class="right text-danger">￥{{bus.amount}}</view>
						</view>
					</view>
					<view class="uni-list-cell">
						<view class="uni-list-cell-navigate">
							<view class="left">买家留言:</view>
							<input type="text" value="" v-model="bus.message" placeholder="填写给卖家的备注信息" />
						</view>
					</view>
				</view>
			</view>

		</view>
		
		

		<view class="use-point" v-if="detail.allPoint > 0">
			<view class="left">可抵扣积分{{detail.allPoint}}元</view>
			<view class="right" @tap="select_use_point()">
				可用积分: {{detail.user_point}}
				<image :src="usePoint?'/static/icon/selected.png':'/static/icon/she.png'"></image>
			</view>
		</view>
		
	

		<view class="footer">
			<view class="left">
				<view class="price">
					合计: 
					<text class="">￥{{orderAmount}}</text>
					<text class="" v-if="usePoint">+{{orderPoint}}积分</text>
				</view>
				<view class="number">共1件商品</view>
			</view>
			<view class="right" @tap="createOrder()">提交订单</view>
		</view>
		
		<uni-popup :show="showPopup" type="bottom" v-on:hidePopup="showPopup = false">
			<view class="uni-list">
				<view class="uni-list-cell" v-for="(item,index) in coupons" :key="index" @tap="select_coupon(item)">
					<view class="uni-list-cell-navigate">
						{{item.amount}}元{{item.name}}
						
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	import uniPopup from '../../components/uni-popup.vue';
	
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				orderData: {},
				detail: {},
				orderAmount: 0,
				usePoint: false,
				showPopup: false,
				coupons: [],
				business_index: '',
				orderPoint: 0
			};
		},
		onLoad(options) {
			this.orderData = options;		
		},
		onShow() {
			this.getInfo();
		},
		methods: {
			//获取订单内容
				getInfo: function(){
					
					
					var localAddressId = uni.getStorageSync('address_id');
					if(localAddressId){
						this.orderData.address_id = localAddressId;
					}

					var that = this;
					var url =  'order/confirmOrder';
					var data = {
						"goods_id": that.orderData.goods_id,
						"price_id": that.orderData.price_id,
						"number": that.orderData.number,
						"cart_ids": that.orderData.cart_ids,
						"type": that.orderData.type,
						"address_id": that.orderData.address_id,
						'active_type': that.orderData.active_type
					}
					
					var params = {
						url: url,
						data: data,
						sCallback: function(res) {
							that.detail = res.data;
							that.orderAmount = res.data.orderAmount;
						}
					}
					Request.send(params);
				},
				//提交生成订单
				createOrder: function(){
					var that = this;

					var bus = this.detail.businessGoods;

					if(that.orderData.type == 'goods') {
						var message_str = bus[0]['message']?bus[0]['message']:'';
					} else {
						var message = [];
						bus.forEach(function(item, index){
							if(!item.message) {
								item.message = '';
							}
							message.push(item.business_id+'='+item.message);
						})
						var message_str = message.join('&');
					}

					// console.log(message_str);return false;

					var coupons = [];
					bus.forEach(function(item, index){
						if(!item.coupon_id) {
							item.coupon_id = '';
						}
						coupons.push(item.business_id+'='+item.coupon_id);
					})
					var coupons_str = coupons.join('&');
					
					var input_values = '';
					

					
					
					var postData = {
						"goods_id": that.orderData.goods_id ? that.orderData.goods_id: '',
						"price_id": that.orderData.price_id ? that.orderData.price_id: '',
						"number": that.orderData.number ? that.orderData.number: '',
						"cart_ids": that.orderData.cart_ids ? that.orderData.cart_ids: '',
						"type": that.orderData.type,
						"address_id": that.detail.address.id,
						"message": message_str,
						"active_type": that.orderData.active_type ? that.orderData.active_type: '',
						"order_group_id": that.orderData.order_group_id ? that.orderData.order_group_id: '',
						
						"coupons": coupons_str,
						"use_point": that.usePoint
					};
					// console.log(postData); return;
					var params = {
						url: 'order/createOrder',
						data: postData,
						sCallback: function(res) {
							uni.removeStorageSync('address_id');
							uni.redirectTo({
								url: '/pages/order/payorder?type=order&id='+res.data[0]
							})
							
						}
					}
					
					Request.send(params);

					
				},
				//选择优惠券
				select_coupon: function(coupon) {
					console.log(coupon);
					this.detail.businessGoods[this.business_index]['coupon_id'] = coupon.id;
					this.$set(this.detail.businessGoods[this.business_index], 'coupon_text', coupon.amount+'元'+coupon.name);
					
					this.showPopup = false;
				},
				//选择是否使用积分抵扣
				select_use_point: function(){
					if(this.usePoint == 1) {
						this.usePoint = 0;
						this.orderPoint = 0;
						this.orderAmount = this.detail.orderAmount;
					} else {
						
						var point = this.detail.user_point < this.detail.allPoint? this.detail.user_point: this.detail.allPoint;
						console.log(this.detail.user_point,this.detail.allPoint,point);			
						this.usePoint = 1;
						this.orderPoint = point;
						this.orderAmount = this.detail.orderAmount - point;
					}

				}
		}
	}
</script>

<style scoped>
	.confirm{
		margin-bottom: 90upx;
		font-size: 28upx;
	}

	/* 地址样式开始 */
		.confirm .address{
			padding: 30upx 20upx;
			border-bottom: 1upx solid #eee;
			background: #fff;
			display: flex;
			width: 100%;
			font-size: 28upx;
			align-items: center;
		}

		.confirm .address .icon{
			width: 80upx;
			color: #666;
		}
		.confirm .address .icon .iconfont{
			font-size: 40upx;
		}
		.confirm .address .info{
			flex: 1;
			padding-right: 10upx;
			color: #666
		}
		.confirm .address .info .top{
			display: flex;
			justify-content: space-between;
		}
		

		.confirm .address .info .tips{
			display: flex;
			align-items: center;
		}

		.confirm .address .info .tips navigator{
			background: #FD0136;
			color: #fff;
			margin-left: 20upx;
			padding: 8upx 20upx;
			border-radius: 10upx;
			font-size: 24upx;
		}
	/* 地址样式结束 */

	/* 商家样式开始 */
		.bus-box .bus{
			background: #fff;
			margin-top: 10upx;
		}

		.bus-box .bus .header{
			display: flex;
			height: 80upx;
			align-items: center;
			padding: 0 20upx;
			border-bottom: 1upx solid #eee;
		}
		.bus-box .bus .header .iconfont{
			color: #e60012;
		}

		.bus-box .bus .header .bus-name{
			margin-left: 10upx;
			color: #666;
		}

		.bus-box .bus .goods{
			display: flex;
		}

		.bus-box .bus .goods image{
			width: 160upx;
			height: 160upx;
		}

		.bus-box .bus .goods .goods-info{
			flex: 1;
			padding: 0 16upx;
			color: #666;
		}

		.bus-box .bus .goods .goods-info .goods-name{
			margin-bottom: 16upx;
		}

		.bus-box .bus .goods .goods-info .price-number{
			display: flex;
			justify-content: space-between;
			color: #e60012;
		}
		.bus-box .bus .uni-list-cell:after{
			left: 0;
		}

		.bus-box .coupon-name{
			margin-right: 20upx;
		}
	/* 商家样式结束 */

	.use-point{
		background: #fff;
		display: flex;
		justify-content: space-between;
		padding: 0 20upx;
		height: 80upx;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		margin-top: 16upx;
	}

	.use-point .right{
		display: flex;
		align-items: center;
	}

	.use-point image{
		width: 50upx;
		height: 50upx;
		margin-left: 10upx;
	}
	
	.inputs{
		margin-top: 10upx;
	}
	
	.inputs .uni-list-cell-navigate{
		justify-content: flex-start;
	}
	
	.inputs .uni-list-cell-navigate .tips{
		width:160upx;
	}
	.inputs .input{
		flex: 1;
	}

	/* 底部样式开始 */
		.confirm .footer{
			position: fixed;
			display: flex;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 90upx;
			line-height: 90upx;
			font-size: 28upx;
			background: #fff;
			z-index: 99;
			align-items: center;
		}

		.confirm .footer .left{
			flex: 5;
			display: flex;
			justify-content: space-between;
			padding: 0 20upx;
			color: #333;
			line-height: 90upx;
		}

		.confirm .footer .left .price text{
			color: #FD0136;
			font-weight: 600;
		}

		.confirm .footer .right{
			background: #FD0136;
			color: #fff;
			flex: 2;
			text-align: center;
			line-height: 90upx;
		}
	/* 底部样式结束 */
</style>
